<script setup lang="ts">
	import { ref } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import ReCol from "@/components/ReCol";
	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			title: "",
			status: 0,
			Id: 0,
		})
	});
	const ruleFormRef = ref();
	const newFormInline = ref(props.formInline);

	function getRef() {
		return ruleFormRef.value;
	}
	defineExpose({ getRef });
	const agvMapDirectOptions = ref([
		{
			id: 1,
			name: '上'
		},
		{
			id: 2,
			name: '下'
		},
		{
			id: 3,
			name: '左'
		},
		{
			id: 4,
			name: '右'
		}
	])
</script>

<template>
	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto">
		<el-row :gutter="30">
			<re-col :value="12" :xs="24" :sm="24">				<el-form-item label="仓库名称" prop="name">					<el-input v-model="newFormInline.name" clearable placeholder="请输入仓库名称" />				</el-form-item>			</re-col>			<re-col :value="12" :xs="24" :sm="24">				<el-form-item label="仓库编码" prop="code">					<el-input v-model="newFormInline.code" clearable placeholder="请输入仓库编码" />				</el-form-item>			</re-col>			<re-col :value="12" :xs="24" :sm="24">				<el-form-item label="子车X轴起始坐标" prop="carStartXPos">
					<el-input-number v-model="newFormInline.carStartXPos" :min="0" style="width: 100%;"step-strictly/>				</el-form-item>			</re-col>			<re-col :value="12" :xs="24" :sm="24">				<el-form-item label="子车X轴结束坐标" prop="carEndXPos">
					<el-input-number v-model="newFormInline.carEndXPos" :min="0"  style="width: 100%;"step-strictly/>				</el-form-item>			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="子车Y轴起始坐标" prop="carStartYPos">
					<el-input-number v-model="newFormInline.carStartYPos" :min="0"  style="width: 100%;"step-strictly/>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="子车Y轴结束坐标" prop="carEndYPos">
					<el-input-number v-model="newFormInline.carEndYPos" :min="0"  style="width: 100%;"step-strictly/>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="子车X增大方向为右" prop="carXIncrRight" required>
					<el-radio-group v-model="newFormInline.carXIncrRight" class="ml-4">
					  
					  <el-radio :label="1" size="large">是</el-radio>
					  <el-radio :label="0" size="large">否</el-radio>
					</el-radio-group>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="子车Y增大方向为右" prop="carYIncrRight" required>
					<el-radio-group v-model="newFormInline.carYIncrRight" class="ml-4">
					  
					  <el-radio :label="1" size="large">是</el-radio>
					  <el-radio :label="0" size="large">否</el-radio>
					</el-radio-group>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="AGV地图方向" prop="agvMapDirect">
					<el-select
					    v-model="newFormInline.agvMapDirect"
					    placeholder="请选择AGV地图方向"
					  >
					    <el-option
					      v-for="item in agvMapDirectOptions"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id"
					    />
					  </el-select>
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>
<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
</style>